import React, { useEffect, useLayoutEffect, useState } from "react";
import styles from "./index.module.scss";
import { DownFill } from "antd-mobile-icons";
import { Button, Dialog, Popup, Toast } from "antd-mobile";
import { URLSearchParamsInit, useLocation, useNavigate, useSearchParams } from "react-router-dom";
import { ApiToggleData, ApiSetDefault, ApiToggleSideData } from "@/utils/api";

type Props = {};
export default function index({}: Props) {
  const [searchParams,setSearchParams] = useSearchParams()
  let actionCode = searchParams.get("actionCode")//全局编码
  const navigate = useNavigate();
  const [toggleData, setToggleData] = useState<Array<codeData>>();//题目数据
  const [toggleSideData, setToggleSideData] = useState<Array<sideData>>();//左侧切换题目数据
  const [visible3, setVisible3] = useState<boolean>(false)//左侧弹窗
  const [ highlight,setHighlight ] =useState<string>(actionCode as string )//左侧高亮
  const [ title,setTitle ] = useState<string>()

 
  //面试题数据请求
  let getToggle = async (actionCode?:string) => {
    let res = await ApiToggleData(actionCode as string);
    if (res.errCode !== 0) {
      Toast.show({
        icon: "fail",
        content: res.message,
      });
      return;
    }

    setToggleData(res.data);
  };
  //左侧切换面试题请求
  let getSideData = async () =>{
    if(!actionCode){
      navigate("/")
      return
    }
    let res = await ApiToggleSideData()
    if (res.errCode !== 0) {
      Toast.show({
        icon: "fail",
        content: res.message,
      });
      return;
    }
    setToggleSideData(res.data)//赋值给左侧响应数据
    // 判断传进来的title跟现在的title是否一致，一致就赋值
    res.data.forEach((item:codeData) => {
      if(item.actionCode === actionCode){
        setTitle(item.title)
      }
    });
  }
  useEffect(() => {
    if(!actionCode){
      navigate("/")
      return
    }
    getToggle(actionCode);
    getSideData()
    
  }, [searchParams]);

  //设置默认学科
  const setDefault = () => {
    Dialog.confirm({
      content:<div className="qd_showtitle">是否切换{title}为首页默认显示？</div>,
      closeOnMaskClick: true,
      onConfirm: async () => {
        Toast.show({
          icon: "success",
          content: "切换成功，返回首页",
          position: "bottom",
          duration:500
        });
        await ApiSetDefault(actionCode as string);
        setTimeout(()=>{
          navigate("/");
        },500)
        
      },
    });
  };
  //切换题目
  const toggleSide = (actionCode:string,title:string) => {
    // navigate("/toggle?actionCode=" + actionCode)
    // getToggle(actionCode)// 面试题数据请求
    setVisible3(false)//设置左侧弹窗关闭
    setHighlight(actionCode)//设置高亮
    setTitle(title)//设置标题

    setSearchParams((prev: URLSearchParams):URLSearchParamsInit =>{
      prev.set("actionCode",actionCode)
      return prev
    })
    
  }
  return (
    <>
    <div className={styles.qd_toggle_page}>
      {/* 默认学科 */}
      <div className="qd_toggle_subject_area">
        <div className="qd_toggle_subject_title">
          <div className="qd_toggle_subject_title_default">
            <span>默认学科 - </span>
            <span className="qd_toggle_subject_title_default_text">
              { searchParams.get("default") }
            </span>
          </div>
          <div
            className="qd_toggle_subject_title_setdefault"
            onClick={setDefault}
          >
            <span className="qd_toggle_subject_title_setdefault_text">
              设置默认学科
            </span>
            <span className="qd_toggle_subject_title_setdefault_icon">
              <DownFill fontSize={10} />
            </span>
          </div>
        </div>
        <div className="qd_toggle_subject">
          <span className="qd_toggle_subject_left">
            <DownFill fontSize={22} />
          </span>
          <span className="qd_toggle_subject_conter" onClick={()=>setVisible3(true)}>
         { title }
          </span>
          <span className="qd_toggle_subject_right">
            <DownFill fontSize={22} />
          </span>
        </div>
      </div>
      {/* 专业科目 */}
      <div className="qd_toggle_subject_list_area">
        <div className="qd_toggle_subject_list_title">专业科目</div>

        {toggleData?.map((item) => {
          return (
            <div key={item.id} className="qd_toggle_subject_list_item">
              <Button
                block
                shape="rounded"
                className="qd_toggle_subject_list_item_btn"
              >
                {item.title}
              </Button>
            </div>
          );
        })}
      </div>
    </div>
       <Popup
       className={styles.qdtogglepopup}
       visible={visible3}
       onMaskClick={() => {
         setVisible3(false)
       }}
       position='left'
     >
        {toggleSideData?.map((item) => {
          if (item.actionCode === highlight) {
            return (
              <div
                key={item.id}
                className="qd-toggle-popup-item qd-toggle-popup-item-active"
              >
                {item.title}
              </div>
            );
          } else {
            return (
              <div
                key={item.id}
                className="qd-toggle-popup-item"
                onClick={() => toggleSide(item.actionCode,item.title)}
              >
                {item.title}
              </div>
            );
          }
        })}

     </Popup>
     </>
  );
}

//题目数据类型
interface codeData {
  id: number;
  pid: number;
  businessLevel?: any;
  numberLevel: number;
  title: string;
  info: string;
  actionCode: string;
  actionType: string;
  actionName: string;
  createTime: string;
  updateTime?: string;
  invalid: number;
  sort: number;
  createUser: string;
  tenantId?: any;
  itemCount: number;
}


//左侧切换题目
interface sideData {
  id: number;
  pid?: any;
  businessLevel?: any;
  numberLevel: number;
  title: string;
  info: string;
  actionCode: string;
  actionType: string;
  actionName: string;
  createTime: string;
  updateTime?: string;
  invalid: number;
  sort: number;
  createUser: string;
  tenantId?: any;
}

